<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		
	<h1>1-分页（Pagination）</h1>
	<p>下表列出了 Bootstrap 提供的处理分页的 class。</p>
		
<table class="table">
	<tr><th>Class</th><th>描述</th><th>示例代码</th></tr>
	<tr>
		<td>.pagination</td>
		<td>添加该 class 来在页面上显示分页。</td>
		<td> <pre class="prettyprint">
			&lt;ul class="pagination"&gt;
		  	&lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
		  	&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
		  	.......
			&lt;/ul&gt;
		</pre></td>
	</tr>
	<tr>
		<td>.disabled, .active</td>
		<td>您可以自定义链接，通过使用 <b>.disabled</b> 来定义不可点击的链接，通过使用 <b>.active</b> 来指示当前的页面。</td>
		<td> <pre class="prettyprint" style="white-space: pre-wrap;">
			&lt;ul class="pagination"&gt;
			  &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
			  &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
			  .......
			&lt;/ul&gt;
		</pre></td>
	</tr>
	<tr>
		<td>.pagination-lg, .pagination-sm</td>
		<td>使用这些 class 来获取不同大小的项。</td>
		<td> <pre class="prettyprint">
			&lt;ul class="pagination pagination-lg"&gt;...&lt;/ul&gt;
			&lt;ul class="pagination"&gt;...&lt;/ul&gt;
			&lt;ul class="pagination pagination-sm"&gt;...&lt;/ul&gt;
		</pre></td>
	</tr>
</table>
		
		<h2>1.1-默认的分页</h2>
		<p>下面的实例演示了上表中所讨论的 class .pagination 的用法：</p>
		<ul class="pagination">
		  <li><a href="#">&laquo;</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul>

		<h2>1.2-分页的状态</h2>
		<p>下面的实例演示了上表中所讨论的 class <b>.disabled</b>、<b>.active</b> 的用法</p>
		<ul class="pagination">
		  <li><a href="#">&laquo;</a></li>
		  <li class="active"><a href="#">1</a></li>
		  <li class="disabled"><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul>

		<h2>1.3-分页的大小</h2>
		<p>下面的实例演示了上表中所讨论的 class <b>.pagination-*</b> 的用法</p>
		<!-- 大的分页样式 -->
		<ul class="pagination pagination-lg">
		  <li><a href="#">&laquo;</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul><br>
		
		<!-- 小的分页样式 -->
		<ul class="pagination">
		  <li><a href="#">&laquo;</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul><br>
		<ul class="pagination pagination-sm">
		 <li><a href="#">&laquo;</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">4</a></li>
		  <li><a href="#">5</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul>

		
		<h1>2- 翻页(Pager)</h1>
		<pre>
			如果您想要创建爱你简单的分页链接提供给用户进行导航，这可通过翻页（Pager）来实现。
			与分页（Pagination）链接一样，翻页（Pager） 也是无序列表。默认情况下，链接是居中显示的。
			下表列出了 Bootstrap 提供的处理翻页的 class。
		</pre>
		<table class="table">
			<tr><th>Class</th><th>描述</th><th>示例代码</th></tr>
			<tr>
				<td>.pager</td>
				<td>添加该 class 来获得翻页链接。</td>
				<td> <pre class="prettyprint">
					&lt;ul class="pager"&gt;
				  	&lt;li&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
				  	&lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				</pre></td>
			</tr>
			<tr>
				<td>.previous, .next</td>
				<td>使用 class <b>.previous</b> 把链接向左对齐，使用 <b>.next</b> 把链接向右对齐。</td>
				<td> <pre class="prettyprint">
					&lt;ul class="pager"&gt;
				  	&lt;li class="previous"&gt;&lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
				  	&lt;li class="next"&gt;&lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				</pre></td>
			</tr>
			<tr>
				<td>.disabled</td>
				<td>添加该 class 来获得一个颜色变淡的外观。</td>
				<td> <pre class="prettyprint">
					&lt;ul class="pager"&gt;
				  	&lt;li class="previous disabled"&gt;&lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;&lt;/li&gt;
				  	&lt;li class="next"&gt;&lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				</pre></td>
			</tr>
		</table>
		
		<h2>2.1-默认翻页</h2>
		<ul class="pager">
		  <li><a href="#">Previous</a></li>
		  <li><a href="#">Next</a></li>
		</ul>

		<h2>2.2-对齐的链接</h2>
		<p>下面的实例演示了上表中所讨论的 class .previous、.next 的用法</p>
		<ul class="pager">
		  <li class="previous"><a href="#">&larr; Older</a></li>
		  <li class="next"><a href="#">Newer &rarr;</a></li>
		</ul>

		<h2>翻页的状态</h2>
		<p>下面的实例演示了上表中所讨论的 class .disabled 的用法：</p>
		<ul class="pager">
		  <li class="previous disabled"><a href="#">&larr; Older</a></li>
		  <li class="next"><a href="#">Newer &rarr;</a></li>
		</ul>




		
	</body>
</html>
